<template>
  <div class="home-container">
    <div class="left-box">
      <div class="banner">
        <el-image
          :src="
            define.APIURl +
            '/api/file/Image/userAvatar/20230619_440495065505202437.jpg'
          "
          class="dy-img"
        >
        </el-image>
      </div>
      <div class="content_box">
        <div v-for="i in 25" :key="i" class="item">
          {{ i }}
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="date">
        {{ new Date() }}
      </div>
      <div class="login-box">
        <div class="login-content">
          <div class="login-form">
            <img
              class="login-logo"
              src="@/assets/images/login_logo.png"
              alt=""
            />
            <div class="login-tab" :class="'active' + active">
              <a
                class="item"
                :class="{ active: active == 1 }"
                @click="active = 1"
                >{{ $t("login.title") }}</a
              >
              <a
                class="item"
                :class="{ active: active == 2 }"
                @click="active = 2"
                >{{ $t("login.scanTitle") }}</a
              >
            </div>
            <el-form
              v-show="active == 1"
              ref="loginForm"
              :model="loginForm"
              :rules="loginRules"
              autocomplete="on"
              label-position="left"
            >
              <el-form-item label="用户名" prop="account">
                <el-input
                  style="width: 100px"
                  v-model="loginForm.account"
                ></el-input>
              </el-form-item>

              <el-form-item label="密  码" prop="password">
                <el-input v-model="loginForm.password"></el-input>
              </el-form-item>

              <!-- <el-form-item prop="account">
                <el-input
                  ref="account"
                  v-model="loginForm.account"
                  :placeholder="$t('login.username')"
                  name="account"
                  type="text"
                  tabindex="1"
                  autocomplete="on"
                  prefix-icon="el-icon-user"
                  size="large"
                  @change="getConfig"
                ></el-input>
              </el-form-item>
              <el-form-item class="rule-tip">{{
                $t("login.rule")
              }}</el-form-item>
              <el-tooltip
                v-model="capsTooltip"
                :content="$t('login.upper')"
                placement="right"
                manual
              >
                <el-form-item prop="password">
                  <el-input
                    ref="password"
                    v-model="loginForm.password"
                    show-password
                    :placeholder="$t('login.password')"
                    name="password"
                    tabindex="2"
                    autocomplete="on"
                    @keyup.native="checkCapslock"
                    @blur="capsTooltip = false"
                    prefix-icon="el-icon-lock"
                    size="large"
                  ></el-input>
                </el-form-item>
              </el-tooltip>
              <el-form-item prop="code" v-if="needCode">
                <el-row type="flex" justify="space-between">
                  <el-col class="sms-input">
                    <el-input
                      v-model="loginForm.code"
                      :placeholder="$t('login.codeTip')"
                      name="code"
                      autocomplete="on"
                      prefix-icon="el-icon-key"
                      size="large"
                    >
                    </el-input>
                  </el-col>
                  <el-col class="sms-right code-right">
                    <el-tooltip
                      :content="$t('login.changeCode')"
                      placement="bottom"
                    >
                      <img
                        id="imgcode"
                        :alt="$t('login.changeCode')"
                        :src="define.comUrl + imgUrl"
                        @click="changeImg"
                      />
                    </el-tooltip>
                  </el-col>
                </el-row>
              </el-form-item> -->
              <el-button
                :loading="loading"
                type="primary"
                class="login-btn"
                size="large"
                @click.native.prevent="handleLogin"
                >{{ $t("login.logIn") }}
              </el-button>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      active: 1,
      loginForm: {
        account: "",
        password: "",
        code: "",
        origin: "password",
      },
      loginRules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.accountTip"),
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.passwordTip"),
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: this.$t("login.codeTip"),
          },
        ],
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  computed: {
    sysConfig() {
      return this.$store.state.settings.sysConfig;
    },
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  display: flex;
  .left-box {
    width: 80%;
    height: 100%;
  }
  .right-box {
    width: 20%;
    height: 100%;
  }
}

.banner {
  .dy-img {
    width: 100%;
    height: 35%;
  }
}

.content_box {
  box-sizing: border-box;
  padding: 18px;
  height: 65%;
  // overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  .item {
    float: left;
    height: 80px;
    width: 150px;
    margin: 2px 4px;
    border-radius: 8px;
    background-color: rgb(250, 145, 158);
  }
  .item:nth-child(2n) {
    background-color: rgb(182, 182, 255);
    min-width: 150px;
    flex: 1;
  }
  .item:nth-child(3n) {
    background-color: rgb(29, 200, 149);
  }
  .item:nth-child(4n) {
    background-color: rgb(0, 191, 191);
  }
}

.right-box {
  padding: 0 16px;
  box-sizing: border-box;
  .date {
    font-size: 12px;
    background-color: white;
    height: 30px;
    color: white;
  }
  .login-box {
    background-color: white;
    border-radius: 8px;
    margin-top: 4px;
    height: 500px;
    color: white;

    .login-logo {
      width: 100%;
    }
  }
}

// 登录处样式
.login-tab {
  display: flex;
  height: 42px;
  margin-bottom: 30px;
  position: relative;
  border-bottom: 1px solid #dcdfe6;
  color: black;
  &::after {
    position: absolute;
    left: 0;
    width: 50%;
    height: 2px;
    content: "";
    display: block;
    bottom: -1px;
    background-color: #1890ff;
    z-index: 100;
    transition: 0.5s;
  }

  &.active1 {
    &::after {
      left: 0;
    }
  }

  &.active2 {
    &::after {
      left: 50%;
    }
  }
}
.item {
  position: relative;
  width: 50%;
  font-size: 12px;
  line-height: 58px;
  color: #666;
  display: inline-block;
  height: 58px;
  text-align: center;

  &.active {
    color: #1890ff;
  }
}
.rule-tip {
  color: #a0acb7;
  font-size: 12px;
  line-height: 12px;
  text-align: left;

  >>> .el-form-item__content {
    line-height: 12px;
  }
}

.el-form {
  input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #606266 !important;
  }

  input::-webkit-input-placeholder {
    color: #a0acb7;
  }

  .login-btn {
    width: 100%;
    font-size: 16px;
    margin-top: 12px;
  }

  .foot {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #188ae2;

    .register,
    .forget {
      cursor: pointer;
    }
  }
}

.login-form-QRCode {
  width: 100%;
  text-align: center;

  .qrcode-img {
    position: relative;
    margin-bottom: 18px;
    width: 220px;
    height: 220px;
  }

  .qrcode-tip {
    color: #334d65;
    line-height: 22px;
    font-size: 16px;
    text-align: center;
  }
}

.login-foot {
  position: absolute;
  width: 1060px;
  color: #999;
  font-size: 12px;
  position: fixed;
  bottom: 20px;
  left: 31%;
  text-align: left;
  margin-left: 110px;
}
</style>
